<script setup>
import {ref, computed, onMounted, watch} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {useUserStore} from '../stores/user/user.js';
import {
  Document,
  HomeFilled,
  List,
  Edit,
  ArrowDown,
} from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const userName = computed(() => userStore.userInfo?.username || '未登录');

const activeMenu = ref(route.path);

onMounted(() => {
  // 检查用户是否已登录
  if (!userStore.isLoggedIn) {
    router.push('/login'); // 如果未登录，跳转到登录页面
  }
  activeMenu.value = route.path;
});

// 监听路由变化，更新 activeMenu
watch(
    () => route.path,
    (newPath) => {
      activeMenu.value = newPath;
    }
);

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath);
};

const logout = () => {
  userStore.logout();
  router.push('/login');
};
const password = () => {

}
</script>

<template>
  <div class="user-layout">
    <el-container>
      <!-- Header -->
      <el-header class="header">
        <el-row justify="space-between" align="middle">
          <el-col :span="6">
            <div class="logo">实验室资产管理系统</div>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ userName }}
                <el-icon><ArrowDown/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  <el-dropdown-item @click="password">修改密码</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
              :default-active="activeMenu"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
          >
            <el-menu-item index="/user/home">
              <el-icon>
                <HomeFilled/>
              </el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/user/assets">
              <el-icon>
                <List/>
              </el-icon>
              <span>资产列表</span>
            </el-menu-item>
            <el-menu-item index="/user/borrow">
              <el-icon>
                <Document/>
              </el-icon>
              <span>资产借用</span>
            </el-menu-item>
            <el-menu-item index="/user/signManage">
              <el-icon>
                <Edit/>
              </el-icon>
              <span>签到管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <router-view v-slot="{ Component }">
            <component :is="Component"/>
          </router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.user-layout {
  height: 100%;
}

.el-container {
  height: 100vh;
}

.header {
  background-color: #ffffff;
  padding: 0 20px;
  border-bottom: 1px solid #acadaf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 60px;
}
.el-container {
  height: 100vh;
}
.el-container > .el-container {
  flex: 1;
  overflow: hidden;
}
.logo {
  font-size: 20px;
  font-weight: bold;
  color: rgba(46, 67, 216, 0.91);
  line-height: 60px;
}

.el-aside {
  border-right: 1px solid #acadaf;
  height: 100% !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-menu {
  flex: 1;
  border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.main {
  padding: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
}
</style>